<script setup>
import SideBar from '/src/components/SideBar.vue';
import Banner from '../../components/TeacherBanner.vue';

const routes = [
    {path: '/school_administrator', name: 'school_administrator'},
    {path: '/college_administrator', name: 'college_administrator'},
    {path: '/head_of_department', name: 'head_of_department'},
    {path: '/teacher', name: 'teacher'},
    {path: '/student', name: 'student'},
    // {path: '/practice', name: 'practice'}
]



</script>
<template>
    <div style="display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;">
        <div style="display: grid;
  grid-template-areas: 'banner banner' 'aside main';
  grid-template-columns: 200px calc(100% - 200px);
  grid-template-rows: 60px auto;
  width: 100%;
  height: 100%;
  overflow: auto;">

            <header style="grid-area: banner;
            position: sticky;
            top: 0;
            right: 0;
            z-index: 35;" >

                <Banner style="position: static;" />
            </header>

            <aside style="grid-area: aside;">
                <SideBar :routes="routes" />
            </aside>

            <main style="grid-area: main;  padding-top: 1%; padding-left: 5%;padding-right: 5%;background-color: #f1f2f6;">

                <RouterView />
            </main>

        </div>


    </div>


</template>
<style scoped>

</style>